import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutterdemo/2house730page/utils/regex.dart';

void main() => runApp(LoginPage());

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: LoginWidget(),
          resizeToAvoidBottomInset: false,
    ));
  }
}

class LoginWidget extends StatefulWidget {
  @override
  _LoginWidgetState createState() => _LoginWidgetState();
}

class _LoginWidgetState extends State<LoginWidget> {
  GlobalKey<FormState> _loginFormKey = GlobalKey();
  bool _isEmailCorrect = false;
  bool _isPasswordCorrect = false;
  bool _isEmailInputFocus = true;
  bool _isPasswordInputFocus = false;
  String _email, _password;
  TextEditingController _emailController, _passwordController;

  FocusNode _emailFocusNode = FocusNode();
  FocusNode _passwordFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _emailFocusNode.addListener(() {
      setState(() {
        _isEmailInputFocus = _emailFocusNode.hasFocus;
      });
    });
    _passwordFocusNode.addListener(() {
      setState(() {
        _isPasswordInputFocus = _passwordFocusNode.hasFocus;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 1080, height: 1920, allowFontScaling: false);

    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.only(top: 100.h, left: 50.w, right: 50.w),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  child: Icon(Icons.close),
                ),
              ],
            ),
            SizedBox(
              height: 10.h,
            ),
            Image.asset(
              "assets/images/icon_login_logo.png",
              height: 300.h,
              width: 300.w,
              fit: BoxFit.cover,
            ),
            SizedBox(
              height: 30.h,
            ),
            Form(
              key: _loginFormKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    controller: _emailController,
                    inputFormatters: [LengthLimitingTextInputFormatter(40)],
                    autovalidate: true,
                    autofocus: true,
                    maxLengthEnforced: false,
                    focusNode: _emailFocusNode,
                    decoration: InputDecoration(
                      labelStyle:
                          _isEmailInputFocus ? TextStyle(color: Colors.red) : TextStyle(color: Color(0xff999999)),
                      labelText: '请输入你的登入邮箱地址',
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15.w),
                          borderSide: BorderSide(color: Colors.green, width: 5.w)),
                      focusColor: Colors.red,
                      focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15.w),
                          borderSide: BorderSide(color: Colors.red, width: 8.w)),
                    ),
                    onFieldSubmitted: (value) {
                      print('onFieldSubmitted用户名:$value');
                    },
                    onChanged: (value) => _onEmailInputChange(value),
                    validator: (value) {
                      return _validateEmail(value) ? null : '邮箱格式错误';
                    },
                  ),
                  SizedBox(
                    height: 40.h,
                  ),
                  TextFormField(
                    obscureText: true,
                    inputFormatters: [LengthLimitingTextInputFormatter(20)],
                    controller: _passwordController,
                    autovalidate: true,
                    maxLengthEnforced: false,
                    focusNode: _passwordFocusNode,
                    decoration: InputDecoration(
                      labelStyle:
                          _isPasswordInputFocus ? TextStyle(color: Colors.red) : TextStyle(color: Color(0xff999999)),
                      labelText: '请输入你的登入密码',
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15.w),
                          borderSide: BorderSide(color: Colors.green, width: 5.w)),
                      focusColor: Colors.red,
                      focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15.w),
                          borderSide: BorderSide(color: Colors.red, width: 8.w)),
                    ),
                    onFieldSubmitted: (value) {
                      print('onFieldSubmitted用户名:$value');
                    },
                    onChanged: (value) => _onPasswordInputChanged(value),
                    validator: (value) {
                      return _validatePassword(value) ? null : '密码为6-20位英文数字组合';
                    },
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 40.h,
            ),
            SizedBox(
              width: double.infinity,
              child: Ink(
                decoration: BoxDecoration(
                  //不能同时使用Ink的变量color属性以及decoration属性，两个只能存在一个
                  color: _isRegexCorrect() ? Colors.red : Colors.grey,
                  borderRadius: BorderRadius.all(Radius.circular(0)),
                ),
                child: InkWell(
                  //圆角设置,给水波纹也设置同样的圆角
                  //如果这里不设置就会出现矩形的水波纹效果
                  borderRadius: BorderRadius.circular(0),
                  //设置点击事件回调
                  onTap: _isRegexCorrect() ? _login : null,
                  child: Container(
                    height: 100.0.h,
                    //设置child 居中
                    alignment: Alignment(0, 0),
                    child: Text(
                      "登入",
                      style: TextStyle(color: Colors.white, fontSize: 16.0),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 40.h,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                InkWell(
                  child: Text("忘记密码"),
                  onTap: () => _forgetPassword(),
                ),
                SizedBox(
                  width: 20.w,
                ),
                InkWell(
                  child: Text(
                    "注册会员",
                    style: TextStyle(color: Colors.blue),
                  ),
                  onTap: () => _registerVIP(),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  bool _isRegexCorrect() => _isEmailCorrect && _isPasswordCorrect;

  bool _validateEmail(String email) {
    if (email.length == 0 || Regex.isEmail(email)) {
      return true;
    } else {
      return false;
    }
  }

  bool _validatePassword(String password) {
    if (password.length == 0 || password.length > 5) {
      return true;
    } else {
      return false;
    }
  }

  _login() {
    _emailFocusNode.unfocus();
    _passwordFocusNode.unfocus();
    print("click");
  }

  _onEmailInputChange(String email) {
    setState(() {
      _isEmailCorrect = Regex.isEmail(email);
    });
  }

  _onPasswordInputChanged(String password) {
    setState(() {
      _isPasswordCorrect = (password != null && password.length > 5);
    });
  }

  _forgetPassword() {}

  _registerVIP() {}
}
